<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> stu nicholls | CSS PLaY | cross browser fixed header/footer layout basic method </title>
<style type="text/css" media="screen">
#printhead {display:none;}
html {
height:100%; 
max-height:100%; 
padding:0; 
margin:0; 
border:0; 
background:#fff; 
font-size:80%; 
font-family: "trebuchet ms", tahoma, verdana, arial, sans-serif;
/* hide overflow:hidden from IE5/Mac */ 
/* \*/ 
overflow: hidden; 
/* */ 
}
body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}
#content {display:block; height:100%; max-height:100%; overflow:auto; padding-left:200px; position:relative; z-index:3; word-wrap:break-word;}
#head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:100px; background:#fff; font-size:4em; z-index:5; color:#000; border-bottom:1px solid #000;}
#foot {position:absolute; margin:0; bottom:-1px; right:18px; display:block; width:100%; height:51px; background:#fff; color:#000; text-align:right; font-size:2em; z-index:4; border-top:1px solid #000;}
.pad1 {display:block; width:18px; height:50px; float:left;}
.pad2 {display:block; height:100px;}
#content p {padding:5px;}
.bold {font-size:1.2em; font-weight:bold;}
.red {color:#c00; margin-left:5px; font-family:"trebuchet ms", "trebuchet", "verdana", sans-serif;}
h2 {margin-left:5px;}
h3 {margin-left:5px;}
</style>
<style type="text/css" media="print">
html {padding:0; margin:0; border:0; background:#fff; font-size:10pt; font-family: arial, sans-serif;}
body {padding:0; margin:0; border:0;}
#content {display:block; position:relative; z-index:3; word-wrap:break-word;}
#head {display:none;}
#printhead {height:100px; background:#fff; font-size:24pt; color:#000; border-bottom:1px solid #000;}
#printfoot {height:50px; background:#fff; color:#000; text-align:right; font-size:12pt; border-top:1px solid #000; margin-top:20px;}
#foot {display:none;}
</style>
</head>
<body>
<div id="printhead">www.s7u.co.uk - Cutting Edge CSS</div>
<div id="head"><div class="pad1"></div>Header</div>
<div id="content">
<a name="Top"></a>
<div class="pad2"></div>
<h2>Back to Basics II</h2>
<h3>The bare essentials of the <a href="http://www.cssplay.co.uk/layouts/body2.html" title="Fixed layout version 2">Fixed Layout version 2</a></h3>
<p class="bold">This is the alternative method of having a scrolling content area with fixed header and footer.</p>
<p>March 29th 2005 - Now with anchors - see bottom of page content.</p>
<p>This one has a full height scroll bar, works the same in all browsers and does not require IE to be in quirks mode.</p>
<p class="bold">CSS - the html tag:</p>
<p class="red">
html {<br>
height:100%; /* fix height to 100% for IE */<br>
max-height:100%; /* fix height for other browsers */<br>
padding:0; /*remove padding */<br>
margin:0; /* remove margins */<br>
border:0; /* remove borders */<br>
<a name="Middle"></a>
background:#fff; /*color background - only works in IE */<br>
font-size:80%; /*set default font size */<br>
font-family:"trebuchet ms", tahoma, verdana, arial, sans-serif; /* set default font */<br>
/* hide overflow:hidden from IE5/Mac */<br> 
/* \*/<br>
overflow:hidden; /*get rid of scroll bars in IE */<br>
/* */<br> 
}<br>
</p>
<p class="bold">CSS - the body tag:</p>
<p class="red">
body {<br>
height:100%; /* fix height to 100% for IE */<br>
max-height:100%; /* fix height for other browsers */<br>
overflow:hidden; /*get rid of scroll bars in IE */<br>
padding:0; /*remove padding */<br>
margin:0; /* remove margins */<br>
border:0; /* remove borders */<br>
}<br>
</p>
<p>This now gives a html / body size of 100% x 100% with no scroll bars 
on which we can place a header and footer using position absolute in the
 normal way. The header and footer will stay fixed because the body 
cannot scroll.</p>
<p>OK. now to tackle the content which must appear below the header, above the footer and scroll on overflow. <span class="bold">In this example ALL browsers work the same way</span>.</p>
<p>The #content div is set up as follows:</p>
<p class="red">
#content {
<br>
display:block; /* set up as a block */<br>
height:100%; /* set height to full page */<br>
max-height:100%;<br>
overflow:auto; /* add scroll bars as required */<br>
padding-left:200px; /* pad left to avoid navigation div if required */<br>
position:relative; /* set up relative positioning so that z-index will work */<br>
z-index:3; /* allocate a suitable z-index */<br>
}<br>
</p>
<p>This now gives you a full height content div. BUT we need to avoid 
the header and footer when first viewed. So we add top and bottom 
'padding'.<br>If we literally added padding-top and padding-bottom then 
the vertical scroll bar will move down the screen so instead we add a 
padding div at the top and bottom of our content.</p>
<p class="red">
.pad2 {<br>
display:block;<br>
height:100px; /* height to miss header and footer */<br>
}<br>
</p>
<p>You can now add the header and footer using position:absolute; with a
 suitable z-index such that it appears over the content div. When the 
content is scrolled it will disappear under the header / footer.</p>
<p>BUT note that the header and footer will need to be positioned 
right:18px; to avoid covering the scroll bar. This will make the header 
and footer overhang the left of the screen by 18px so you may need a 
'pad' of 18px to bring header and footer back on screen.</p>
<p>© 2004/5/6 Stuart Nicholls</p>
<p class="bold">Works in IE5.01, IE5.5, IE6, Opera 7.23, Mozilla and Firefox</p>
<p>NN7 displays correctly but an absolutely positioned div in the content area stays 'fixed' as the content scrolls.</p>
<a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=Basics2" title="Your comments">Your comments</a>
<br>
<a href="#Top">Top</a><br>
<a href="#Middle">CSS - the body tag</a><br><br>
<a href="http://web.top.org/css/" title="CSS (Design) - TOP.ORG"><img style="border: medium none;" src="%E6%B0%B8%E8%BF%9C%E6%9C%89%E5%A4%B4%E5%92%8Cfooter_files/toporg_1667.htm" alt="CSS (Design) - TOP.ORG"></a>

<div class="pad2"></div>
</div>
<div id="foot">Footer</div>

<div id="printfoot">Copyright ©2004-2008 Stu Nicholls

</div>
<script src="%E6%B0%B8%E8%BF%9C%E6%9C%89%E5%A4%B4%E5%92%8Cfooter_files/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-451410-1";
urchinTracker();
</script>

</body></html>